<template>
  <div style="height: 100%; width: 100%; overflow: auto">
   
    <el-row class="secondRow"
      ><!--待缴费-文字-->
      <span class="title">待缴费</span>
    </el-row>
    <el-row class="threeRow"
      ><!--表格-->
      <el-table
        :data="waitCost"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        border
        :cell-style="tableCellStyle"
        :header-cell-style="tableHeaderCellStyle"
      >
        <el-table-column prop="type" label="项目名称" width="180">
        </el-table-column>
        <el-table-column prop="money" label="缴费金额" width="180">
        </el-table-column>
        <el-table-column prop="status" label="状态"> 待缴费</el-table-column>
        <el-table-column  label="缴费">
          <template slot-scope="scope">
              <button class="waitCost" @click="toPay(scope.row.type)">缴费</button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="secondRow"
      ><!--历史缴费-文字-->
      <span class="title">历史缴费</span>
    </el-row>
    <el-row class="threeRow"
      ><!--表格-->
      <el-table
        :data="historyCost"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        border
        :cell-style="tableCellStyle"
        :header-cell-style="tableHeaderCellStyle"
      >
        <el-table-column prop="type" label="项目名称" width="180">
        </el-table-column>
        <el-table-column prop="time" label="缴费时间" width="180">
        </el-table-column>
        <el-table-column prop="money" label="缴费金额"> 
        </el-table-column>
        <el-table-column prop="status" label="缴费金额">已缴费 
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "myCost",
  mounted(){
    this.getWaitCost()
    this.getHistoryCost()
  },
  data() {
    return {
        border:true,
        waitCost:[
     
        ],
        historyCost:[
           
        ],
        userId:'24123'
    };
  },
  methods: {
    //设置表格斑马纹颜色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 1) {
        return "custom_stripe";
      } else {
        return "";
      }
    },
    // 修改 table cell边框的背景色 整个表格body
    tableCellStyle() {
      return "border-color: rgba(204, 204, 204, 1);text-align: center;";
    },
    // 修改 table header cell的背景色  第一行
    tableHeaderCellStyle() {
      return "border-color: rgba(204, 204, 204, 1); background-color: rgba(168, 189, 203, 0.6);color:rgba(0, 0, 0, 1);text-align: center;";
    },
    //去缴费
    toPay(type){
      axios({
        method:'get',
        url:'http://localhost:5000/reader/toCost',
        params:{
            'userId':this.userId,
            'type':type
        }
       
    }).then(r=>{//发送成功
          this.$message({
          message: '缴费成功',
          type: 'success'
          });
          this.getHistoryCost()
          this.getWaitCost()
        
    }).catch(r=>{
        console.log(r)
    })
      
    },
    //获取待缴费
    getWaitCost(){
      axios({
        method:'get',
        url:'http://localhost:5000/reader/myCostWait',
        params:{
            'userId':this.userId
        }
       
    }).then(r=>{//发送成功
        this. waitCost=r.data.data
    }).catch(r=>{
        console.log(r)
    })
    },
    //获取历史缴费
    getHistoryCost(){
      axios({
        method:'get',
        url:'http://localhost:5000/reader/myCostHistory',
        params:{
            'userId':this.userId
        }
       
    }).then(r=>{//发送成功
        this. historyCost=r.data.data
    }).catch(r=>{
        console.log(r)
    })
    }
  },
};
</script>

<style scoped>
.oneRow {
  width: 30%;
  height: 40px;
  margin-top: 30px;
  margin-left: 750px;
  background-color: rgba(229, 229, 229, 1);
  border-radius: 55px;
}
.secondRow {
  width: 15%;
  height: 6%;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 50px;
  background-color: rgba(237, 209, 209, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.threeRow {
  width: 90%;
  margin-left: 50px;
  margin-bottom: 20px;
}
.icon {
  height: 100%;
  width: 13%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input {
  width: 65%;
  height: 100%;
}
.btn {
  height: 100%;
  width: 22%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-icon {
  height: 80%;
  width: auto;
}
.input-style {
  width: 100%;
  height: 100%;
  border-color: transparent;
  background-color: transparent;
  outline: none;
  font-size: 18px;
}
.search-btn {
  height: 70%;
  width: 90%;
  border-radius: 40px;
  background-color: #394a79;
  color: white;
  border: transparent;
  font-size: 15px;
  cursor: pointer;
  letter-spacing: 1.5px;
}
.title {
  font-size: 16px;
  letter-spacing: 2px;
}
::v-deep .custom_stripe {
  background-color: rgba(241, 241, 241, 1);
}
.waitCost{
    height:100%;
    width:20%;
    background-color: rgba(125, 153, 191, 1);
    color:white;
    border-radius: 8px;
    border-color:transparent;
    letter-spacing: 2px;
    cursor: pointer;
}
</style>